<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小U商城-购物车</title>
    
    <link rel="stylesheet" href="./css/shopcar.css">
    <script src="./js/html5shiv.min.js"></script>
    <script src="./js/adaptive.js"></script>
    
</head>
<body>
    <header class="xu-navbar">
    
        <!-- 头部公共区域 -->
        <div class="n_header">
            <div class="arrow_left">
                <a href="#" class="iconfont">&#xe663;</a>
            </div>
        
            <h1>购物车</h1>
            <div class="right">
        
                <a href="#" class="iconfont">&#xe648;</a>
                <a href="#" class="iconfont">&#xe649;</a>
        
        
            </div>
        </div>
        <div class="n_bottom">
            <div class="wrap">
                <!-- 顶部分页栏 -->
                <ul class="tnav_list">
                    <li class="active"><a href="">全部(20)</a></li>
                    <li><a href="">降价(4)</a></li>
                    <li><a href="">常卖(2)</a></li>
                    <li><a href="">分类<i class="iconfont sort_icon">&#xe601;</i></a></li>
                    
                </ul>
            </div>
        </div>
    
    
    
    </header>
    <div id="app">

    
    <section class="content"> 
        <div class="category_box">
            <div class="category_menu">
                <div class="tm_left">
                    <input type="checkbox" id="checkbox" name="checkgroup1"  v-model="checkedAll1" @change="Allchecked1">
                    <label for="checkbox" class="checkbox"></label>
                    <span>小U自营</span>
                </div>
                <div class="tm_right">
                    <span>已免运费</span>
                    <i>|</i>
                    <a href="">领券</a>
                </div>
            
            </div>
            <div class="shopcar_list">
                <ul>
                    <li class="shopcar_item" v-for="item,index in list1" :key="item.id" >
                        <div class="outer">
                            <input type="checkbox" id="checkbox" name="checkgroup1" v-model="item.checked">
                            <label for="checkbox" class="checkbox"></label>
                            
                        </div>
                       
                        <a href="">
                            <img :src="item.img" alt="">
                        </a>
                            <div class="goods_info">
                                <div class="gi_top">
                                    <h4 class="goods_title moretxt">{{item.title}}</h4>
                                    <p class="goods_des moretxt">
                                        {{item.info}}
                                    </p>
                                </div>
                                <div class="gi_bottom">
                                    <select name="" id="">
                                        <option value="粉色">粉色 50ML </option>
                                        <option value="粉色">粉色 50ML </option>
                                        <option value="粉色">粉色 50ML </option>
                                    </select>
                                    <p class="cp">比加入时降低&yen;{{item.discount}}</p>
                                    <div class="price_count">
                                        <div class="l_price">
                                            <em class="new_price"> &yen;<span>{{item.price}}</span>
                                                <del>&yen;{{item.old_price}}</del>
                                            </em>
                                        </div>
                                        <div class="r_count">
                                            <i class="iconfont" @click="item.num==0?'':item.num--">
                                                &#xe602;
                                            </i>
                                            <span class="num">{{item.num}}</span>
                                            <i class="iconfont" @click="item.num++">
                                                &#xe615;
                                            </i>
                                        </div>
            
            
                                    </div>
            
            
            
                                </div>
            
                            </div>
                        
            
                    </li>
                   
                </ul>
            </div>
        </div>
        <div class="category_box">
            <div class="category_menu">
                <div class="tm_left">
                    <input type="checkbox" id="checkbox" name="checkgroup2" v-model="checkedAll2" @change="Allchecked2">
                    <label for="checkbox" class="checkbox"></label>
                    
                    <span>品牌精选</span>
                </div>
                <div class="tm_right">
                    <span>已免运费</span>
                    <i>|</i>
                    <a href="">领券</a>
                </div>
        
            </div>
            <div class="shopcar_list">
                <ul>
                <li class="shopcar_item" v-for="item,index in list2" :key="item.id" >
                    <div class="outer">
                        <input type="checkbox" id='checkbox' name="checkgroup2" v-model="item.checked">
                        <label for='checkbox' class="checkbox"></label>
                
                    </div>
                
                    <a href="">
                        <img :src="item.img" alt="">
                    </a>
                        <div class="goods_info">
                            <div class="gi_top">
                                <h4 class="goods_title moretxt">{{item.title}}</h4>
                                <p class="goods_des moretxt">
                                    {{item.info}}
                                </p>
                            </div>
                            <div class="gi_bottom">
                                <select name="" id="">
                                    <option value="粉色">粉色 50ML </option>
                                    <option value="粉色">粉色 50ML </option>
                                    <option value="粉色">粉色 50ML </option>
                                </select>
                                <p class="cp">比加入时降低&yen;{{item.discount}}</p>
                                <div class="price_count">
                                    <div class="l_price">
                                        <em class="new_price"> &yen;<span>{{item.price}}</span>
                                            <del>&yen;{{item.old_price}}</del>
                                        </em>
                                    </div>
                                    <div class="r_count">
                                        <i class="iconfont" @click="item.num==0?'':item.num--">
                                            &#xe602;
                                        </i>
                                        <span class="num">{{item.num}}</span>
                                        <i class="iconfont" @click="item.num++">
                                            &#xe615;
                                        </i>
                                    </div>
                
                
                                </div>
                
                
                
                            </div>
                
                        </div>
                    
                
                </li>
                  
                </ul>
            </div>
        </div>
    </section>
    <!-- 底部导航栏 -->
    <footer class="footer">
        <div class="account">
            <div class="ac_left">
                <input type="checkbox" id="checkboxAll" v-model="checkedAll" >
                <label for="checkboxAll" class="checkbox"></label>
                
                <em>全选</em>
            </div>
            
            <div class="ac_mid">
                <div class="ac_m_l">
                    <em>合计</em>
                    <span>已免运费</span>
                </div>
                <div class="ac_m_r">
                    <em>&yen;{{total.totalPrice}}</em>
                    <span>已优惠¥{{total.totalDiscount}}元</span>
                </div>
            </div>
            <a href="" class="ac_bt">
                结算
            </a>
        </div>
        <nav class="mui-bar mui-bar-tab ">
            <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
                <span class="iconfont mui-icon"></span>
                <span class="mui-tab-label">商城</span>
            </a>
            <a class="mui-tab-item" href="tab-webview-subpage-chat.html">
                <span class="iconfont mui-icon"></span>
                <span class="mui-tab-label">分类</span>
            </a>
            <a class="mui-tab-item" href="tab-webview-subpage-contact.html">
                <span class="iconfont mui-icon"></span>
                <span class="mui-tab-label">购物车</span>
            </a>
            <a class="mui-tab-item" href="tab-webview-subpage-setting.html">
                <span class="iconfont mui-icon"></span>
                <span class="mui-tab-label">我</span>
            </a>
        </nav>
    </footer>
    </div>
    <script src="./js/mui.min.js"></script>
    <script>
        mui.init();
    </script>
    <script src="../../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                checkedAll1: false,
                checkedAll2: false,
                
                list1:[
                    
                    {   
                        id:1,
                        title:'溪牧原山茶花洁面泡沫 氨基酸氨基酸氨基酸',
                        info:'敏感肌可用，控油祛痘、男女可用男女可用男女可用男女可用男女可用',
                        price:999,
                        old_price:1099,
                        num:1,
                        img:'./images/goods_list_01.jpg',
                        checked:true,
                        discount: 100
                    },
                    {
                        id: 2,
                        title: '溪牧原山茶花洁面泡沫 氨基酸氨基酸氨基酸',
                        info: '敏感肌可用，控油祛痘、男女可用男女可用男女可用男女可用男女可用',
                        price: 100,
                        old_price: 300,
                        num: 1,
                        img: './images/goods_list_04.jpg',
                        checked: false,
                        discount: 200
                    }

                ],
                list2:[
                     
                    {
                        id: 1,
                        title: '溪牧原山茶花洁面泡沫 氨基酸氨基酸氨基酸',
                        info: '敏感肌可用，控油祛痘、男女可用男女可用男女可用男女可用男女可用',
                        price: 9999,
                        old_price: 10099,
                        num: 1,
                        img: './images/goods_list_01.jpg',
                        checked: false,
                        discount:100
                    },
                    {
                        id: 2,
                        title: '溪牧原山茶花洁面泡沫 氨基酸氨基酸氨基酸',
                        info: '敏感肌可用，控油祛痘、男女可用男女可用男女可用男女可用男女可用',
                        price: 55,
                        old_price: 100,
                        num: 1,
                        img: './images/goods_list_04.jpg',
                        checked: false,
                        discount: 45
                    }
                ]
            },
            methods: {
                
            },
            watch:{
                
                list1:{
                    handler(){
                        this.checkedAll1=this.list1.every(item=>item.checked);
                    },
                    deep:true
                },
                list2:{
                     handler() {
                        this.checkedAll2 = this.list2.every(item => item.checked);
                    },
                    deep: true
                },
                

            },
            computed:{
                total(){
                    let totalPrice = 0;
                    let totalDiscount=0
                    this.list1.forEach(item => {
                        if(item.checked){
                            totalPrice += item.price * item.num;
                            totalDiscount += item.discount * item.num;
                        }
                    });
                     this.list2.forEach(item => {
                        if (item.checked) {
                            totalPrice += item.price * item.num;
                            totalDiscount += item.discount * item.num;
                        }
                    });
                    return {totalPrice,totalDiscount}
                },
                checkedAll:{
                    get(){
                        return this.checkedAll1 && this.checkedAll2;
                    },
                    set(val){
                        this.list1.forEach(item => {
                             item.checked = val;
                         });
                         this.list2.forEach(item => {
                             item.checked = val;
                         });
                        
                     }
                }
            },
            methods: {
                Allchecked1(){
                        this.list1.forEach(item => {
                            item.checked = this.checkedAll1;
                        });
                    
                },
                Allchecked2(){
                    
                        this.list2.forEach(item => {
                            item.checked = this.checkedAll2;
                        });
                    
                },
               
            },
        })
    </script>
</body>
</html>

